<template>
  <div id="DataBaseSize">
    <dv-scroll-board
      :config="config"
      style="width: 530px; height: 160px"
      ref="scrollBoard"
    />
  </div>
</template>

<script>
import { MySqlTableSize } from "@/api/index";
import bus from "common/bus.js";
export default {
  data() {
    return {
      config: {
        header: ["表名", "数据大小","索引大小(MB)"],
        index: true,
        columnWidth: [50, 100, 100,100],
        align: ["center"],
        headerBGC: "rgba(4, 44, 119, 0.7)",
        headerHeight: "35px",
        oddRowBGC:'#021033',
        evenRowBGC:'#021033',
        data: [],
      },
      selectedMonID: "",
    };
  },
  created() {
    bus.$on("selectedMonIDMysql", (msg) => {
      
      this.restData()
      this.selectedMonID = msg;


          this.initGetData();
      
    });
  },
  methods: {
    initGetData() {
      
      MySqlTableSize({ip:this.selectedMonID.selectedIP,dbServername:this.selectedMonID.selectedDBNAME})
        .then((res) => {
          
         

          let initdata = [];
          res.forEach((item) => {
            initdata.push([item.tableName, item.dataSize,item.indexSize]);
          });
          this.config = {
            header: ["表名", "数据大小(MB)","索引大小(MB)"],
            index: true,
            columnWidth: [50, 100, 100,100],
            align: ["center"],
            headerBGC: "rgba(4, 44, 119, 0.7)",
            headerHeight: 25,
            oddRowBGC:'#021033',
            evenRowBGC:'#021033',

            data: initdata,
          };
          
        })
        .catch((err) => {})
        .finally((_) => {});
    },
    restData(){
      this.config={
        header: ["表名", "数据大小","索引大小"],
        index: true,
        columnWidth: [50, 100, 100,100],
        align: ["center"],
        headerBGC: "rgba(4, 44, 119, 0.7)",
        headerHeight: "35px",
        oddRowBGC:'#021033',
        evenRowBGC:'#021033',
        data: [],

      };
    }
  },
  beforeDestroy() {
  bus.$off('selectedMonIDMysql')}
};
</script>

<style>
.dv-scroll-board .rows .ceil,.dv-scroll-board .header .header-item{
  font-size: 12px!important;
  font-weight: 600;
}
</style>